<template>
  <div class="login-container">
    <div class="login-container-con">
      <div class="head">
        <el-col :xs="8" :sm="8" :md="4" :lg="1" style="width: 36px; height: 36px; overflow: hidden; margin-right: 10px;">
          <div style="width: 36px; height: 36px;">
            <img :src="site.pc_logo_url" style="width: 100%; height: 100%; margin-left: 9%; border-radius: 50%;" />
          </div>
        </el-col>
        <el-col :span="15">
          <div style="color: #666; font-size: 24px; font-weight: 900; line-height: 36px; text-align: left;">
            {{ site.pc_title }}
          </div>
        </el-col>
      </div>
      <el-row class="content_info">
        <el-col :span="14">
          <div class="login_img">
            <img :src="site.pc_login_left_banner_url" alt="" />
            <!--<img class="logo" src="../../assets/images/logo.png" alt="">-->
            <!--<p class="big">欢迎进入{{site.pc_title}}</p>-->
          </div>
        </el-col>
        <el-col :span="1"></el-col>
        <el-col :span="9" class="login_input">
          <el-form ref="loginForm" :model="loginForm" :rules="rules" class="login-form" label-position="left">
            <!-- <div class="title-container">
              <h3 class="title">
                系统登录
              </h3>
            </div> -->

            <div class="top-pane" v-if="tabs_is_show">
              <span :class="item.id == select ? 'active-sty' : ''" v-for="(item,index) in tabs" :key="index" @click="changeSelect(item)" v-show="item.isShow">{{item.text}}</span>
            </div>

            <div class="code-pane" v-if="select == '1' && wechat_qrcode_config.wechat_login_type==2 && tabs_is_show">
              <div class="code-title">微信登录</div>
              <img :src="account_url" alt="">
              <div class="code-tip">
                <span>请使用微信扫描二维码关注公众号登录</span>
                <div class="refresh" @click="login({ is_pc_qrcode: 1, yz_redirect: yz_redirect },1)" v-if="pc_bind_mobile != 1">
                  <i class="iconfont icon-fontclass-gengxin"></i>
                  <span class="refresh-name">刷新</span>
                </div>
              </div>
            </div> 
            <div class="code-pane" v-show="wechat_qrcode_config.wechat_login_type == 1 && pc_bind_mobile != 1 && select == '1' && tabs_is_show" >
              <div id="login_code" style="margin-top: -20px;"></div>
              <div class="refresh-op" @click="login({ is_pc_qrcode: 1, yz_redirect: yz_redirect },1)" v-if="pc_bind_mobile != 1">
                <i class="iconfont icon-fontclass-gengxin"></i>
                <span class="refresh-name">刷新</span>
              </div>
            </div>

            <div v-if="select == '0' && tabs_is_show">
              <!--<el-tabs v-model="activeName" type="card" :stretch="true">-->
              <!--<el-tab-pane label="密码登录" name="5">-->
              <el-form-item prop="mobile" v-if="accountLogin">
                <i class="iconfont icon-verification_member svg-container" style="font-size: 24px; margin-right: 5px;"></i>
                <el-input v-model.trim="loginForm.mobile" placeholder="请输入账号" name="name" type="text"
                  auto-complete="on" />
              </el-form-item>

              <el-form-item prop="password" v-if="accountLogin">
                <i class="iconfont icon-verification_psw svg-container" style="font-size: 24px; margin-right: 5px;"></i>
                <el-input v-model.trim="loginForm.password" :type="passwordType" placeholder="请输入密码"
                  name="password" auto-complete="on" @keyup.enter.native="handleLogin" />
                <span class="show-pwd" @click="showPwd">
                  <!-- <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" /> -->
                  <img
                    :src="passwordType === 'password' ? require('@/assets/images/no_view_password.png') : require('@/assets/images/view_password.png')"
                    :style="passwordType === 'password' ? 'width: 1.094rem;height: 0.719rem;' : 'width: 1.188rem;height: 0.563rem;'"
                  />
                </span>
              </el-form-item>

              <!--<el-form-item prop="name" v-if="captcha" style="display: flex;align-items: start;">-->
              <!--<i-->
              <!--class="iconfont icon-verification_code svg-container"-->
              <!--style="font-size:24px;margin-right: 5px"-->
              <!--&gt;</i>-->
              <!--<el-input-->
              <!--v-model.trim="loginForm.captcha"-->
              <!--placeholder="请输入图形验证码"-->
              <!--name="name"-->
              <!--type="text"-->
              <!--auto-complete="on"-->
              <!--style="width:calc(100% - 180px)"-->
              <!--/>-->

              <!--<img @click="getimgdata" :src="captcha" title="点击刷新验证码" style="cursor:pointer"/>-->
              <!--</el-form-item>-->
              <!--</el-tab-pane>-->
              <!--<el-tab-pane label="验证码登录" name="10">-->

              <el-form-item prop="mobile" v-if="verificationCodeLogin">
                <i class="iconfont icon-verification_phone svg-container" style="font-size: 24px; margin-right: 5px;"></i>
                <el-input v-model.trim="loginForm.mobile" placeholder="请输入手机号" name="name" type="text" auto-complete="on"
                  style="width: calc(100% - 200px);" />

                <el-button type="primary" @click="sendSms()" :disabled="isDisabled == 0" style="background-color: #29ba9c !important; border-color: #29ba9c !important; margin-left: 5px;">{{ captcha_text }}</el-button>
              </el-form-item>
              <el-form-item prop="captcha" v-if="captcha && verificationCodeLogin" style="position: relative;">
                <i class="iconfont icon-verification_code svg-container" style="font-size: 24px; margin-right: 5px;"></i>
                <el-input v-model.trim="loginForm.captcha" placeholder="请输入图形验证码" name="name" type="text"
                  auto-complete="on" style="width: calc(100% - 180px);" />

                <img @click="getimgdata" :src="captcha" title="点击刷新验证码"
                  style="cursor: pointer; position: absolute; top: 5px;" />
              </el-form-item>
              <el-form-item prop="code" v-if="verificationCodeLogin">
                <i class="iconfont icon-verification_code1 svg-container" style="font-size: 24px; margin-right: 5px;"></i>
                <el-input v-model.trim="loginForm.code" placeholder="请输入手机验证码" name="name" type="text"
                  auto-complete="on" />
              </el-form-item>
              <div class="switch_on" v-if="accordingToSwitch" @click="switchLoginMode()">
                {{verificationCodeLogin?'切换账号密码登录':'切换手机验证码登录'}}
              </div>
              <!--</el-tab-pane>-->
              <!--</el-tabs>-->

              <div style="display: flex;">
                <el-checkbox v-model="remember_pwd" :true-label="1" :false-label="0" :label="1" style="color: #999;">记住用户名
                </el-checkbox>
                <div v-if="false">
                  <span class="forget2" v-if="activeName == 5" @click="activeName = 10">验证码登录</span>
                  <span class="forget2" v-if="activeName == 10" @click="activeName = 5">密码登录</span>
                </div>
                <router-link :to="fun.getUrl('subplatformForget')">
                  <span class="forget">忘记密码？</span>
                </router-link>
              </div>
              <!--<div class="register">-->
              <!--<span>没有账号？</span>-->
              <!--<span class="forget3" @click="gotoRegister">立即注册</span>-->
              <!--</div>-->
              <el-button :loading="loading" type="primary"
                style="background-color: #29ba9c !important; border-color: #29ba9c !important; width: 100%; margin: 30px 0; padding: 12px 20px; font-size: 18px;" @click.native.prevent="handleLogin">
                登录
              </el-button>
              <div style="position: relative;"></div>
             </div>
          </el-form>
        </el-col>
      </el-row>
      <el-row style="margin-top: 40px;">
        <el-col align="center" style="padding: 30px 0;">
          <p v-html="site.copyright"></p>
        </el-col>
      </el-row>
    </div>
    <!-- <el-button @click="is_tips()">点击弹开</el-button> -->
    <!-- <el-dialog title="" :visible.sync="is_tips">
      <div style="text-align:center;">
        <div style="font-size:50px;color:#ff7676;padding:50px 0">
          <i class="el-icon-warning"></i>
        </div>
        <div style="padding-bottom:50px;font-size:16px">
          提示：您当前密码安全强度较弱，建议您修改密码。
        </div>
        <div style="padding-bottom:50px">
          <el-button type="primary">
            修改密码
          </el-button>
        </div>
      </div>
      <span slot="footer" class="dialog-footer"> </span>
    </el-dialog> -->
    <el-popover placement="left-end" width="220" height="200" trigger="hover">
      <div class="code">
        <img :src="site.customer_qrcode" alt="" />
      </div>
      <div class="service" slot="reference">
        <i class="iconfont icon-all_service"></i>
      </div>
    </el-popover>
  </div>
</template>

<script>
  require('./js/wxLogin.js');
  import Vue from 'vue';
  import { Button , Checkbox , Row , Col , Message} from "element-ui";
  Vue.use(Button).use(Checkbox).use(Row).use(Col);
  import http from './js/http.js'
  Vue.prototype.$message = Message;
  import base64_encode from "../../utils/base64_encode";
  export default {
    name: "Login",
    data() {
      var validateMobile = (rule, value, callback) => {
        if (!/^1\d{10}$/.test(value)) {
          callback(new Error("手机号格式不正确"));
        } else {
          callback();
        }
      };
      // const validateUsername = (rule, value, callback) => {
      //   if (!isvalidUsername(value)) {
      //     callback(new Error('请输入用户名/手机号'))
      //   } else {
      //     callback()
      //   }
      // }
      // const validatePassword = (rule, value, callback) => {
      //   if (value.length < 6) {
      //     callback(new Error('The password can not be less than 6 digits'))
      //   } else {
      //     callback()
      //   }
      // }
      return {
        ys_short_url_redirect_url: "",
        ys_short_url_redirect_tel: "",
        // activeName: "5",
        login_info: {},
        site: {},
        loginData: {},
        remember_pwd: false,
        // is_tips: false,
        loginForm: {
          password: "",
          mobile: ""
        },
        passwordType: "password",
        // 图形验证码
        captcha: "",
        // 短信验证码
        sms: {},
        captcha_text: "获取验证码",
        isDisabled: 1,
        t: 60,

        loading: false,
        showDialog: false,
        redirect: undefined,
        accountLogin: true, //账号登陆是否开启
        verificationCodeLogin: false, //验证码登陆是否开启
        accordingToSwitch:false,//显示登陆切换
        rules: {
          code: [{
            required: true,
            trigger: "blur",
            message: "请输入验证码"
          }],
          password: [{
            required: true,
            trigger: "blur",
            message: "请输入密码"
          }],

          mobile: [{
              required: true,
              message: "请输入手机号",
              trigger: "blur"
            },
            {
              validator: validateMobile,
              trigger: "blur"
            }
          ]
        },
        account_url: "" ,//二维码
        pc_token: "",
        wechat_qrcode_config: {},
        yz_redirect: "", // 登录跳回链接
        tabs: [
          {
            id: "1",
            text: "扫码登录",
            isShow: false
          },
          {
            id: "0",
            text: "手机号登录",
            isShow: true
          },
        ],
        select: "1",
        // login_type: 1,
        pc_bind_mobile: "",
        tabs_is_show: false
      };
    },
    watch: {
      $route: {
        handler: function(route) {
          // this.redirect = route.query && route.query.redirect;
        },
        immediate: true
      }
    },
    created() {
      this.getLoginData();
      // // this.getimgdata();
      this.getGlobalData();
    },
    mounted() {
      this.getlocalStorage();
      this.getLoginMode();
    },
    destroyed() {},
    methods: {
      switchLoginMode(){ //登陆方式切换
        this.accountLogin = !this.accountLogin
        this.verificationCodeLogin = !this.verificationCodeLogin
      },
      getGlobalData() {
        http.get("plugin.sub-platform.frontend.setting.index")
          .then(response => {
            if (response.result === 1) {
              this.site = response.data;
              this.setIcon(response.data.pc_favorite_icon_url)
              // localStorage.setItem("setPublicSetting", JSON.stringify(this.site));
            }
          })
          .catch(error => {
            console.log(error);
          });
      },
      getLoginData() {
        http
          .get("member.login.login-mode")
          .then(response => {
            if (response.result === 1) {
              this.loginData = response.data;
              this.activeName =
                this.loginData.mobile_code_login == 1 ? "10" : "5";
              this.accountLogin = response.data.password_login == 1?true:false
              this.verificationCodeLogin = response.data.mobile_code_login == 1?true:false
              if(response.data.mobile_code_login == 1&&response.data.password_login == 1){ //如果两种登陆方式都已经开启就默认显示手机登陆并且打开登录切换
                this.accordingToSwitch = true
                this.accountLogin = false
              }
              if (response.data.sms && response.data.sms.captcha.status == "1") {
                this.captcha = response.data.sms.captcha.img;
              }
              if (response.data.yun_sign) {
                this.loginForm.mobile = response.data.yun_sign.tel;
              }
              // if(this.activeName == '10') {
              //   this.loginForm.mobile = this.loginData.tel;
              // }
            }
          })
          .catch(({data,result,msg}) => {
            this.$message.error(msg);
          });
      },
      //获取图片验证码
      getimgdata() {
        $http
          .get("home-page.getCaptcha")
          .then(res => {
            if (res.data.captcha) {
              this.captcha = res.data.captcha.img;
            }
          })
          .catch(({data,result,msg}) => {
            this.$message.error(msg);
          });
      },
      is_tips() {
        this.$store.dispatch("IsOpenPwd", true);
      },
      getIndex() {
        if (this.remember_pwd) {
          this.loginForm.remember = 1;
        } else {
          this.loginForm.remember = 0;
        }
        // let yz_redirect = sessionStorage.getItem("yz_redirect");
        // if (!this.fun.isTextEmpty(yz_redirect) && yz_redirect) {
        //   this.yz_redirect = yz_redirect;
        // }
        $http
          .post(
            "member.login.index", {
              login_type: this.activeName,
              // is_sms: this.loginData.mobile_login_code,
              is_sms: this.verificationCodeLogin ? 1 : 0,
              // password: base64_encode(this.loginForm.password),
              password: this.loginForm.password,
              captcha: this.loginForm.captcha,
              mobile: this.loginForm.mobile,
              code: this.loginForm.code,
              remember: this.loginForm.remember
              // yz_redirect: this.yz_redirect
            },
            "loading"
          )
          .then(response => {
            console.log(response,'responseresponseresponse');
            if (response.result === 1) {
              this.loading = false;
              
              // this.$store.dispatch("GenerateRoutes", 0);
              if (this.remember_pwd) {
                this.loginForm.remember = 1;
                this.setlocalStorage(this.loginForm.mobile);
              } else {
                // 点击忘记密码，清空localStorage里的存储
                this.setlocalStorage("");
              }

              this.$router.push(
                this.fun.getUrl("subplatformtIndex", {})
              );
            } else {
              this.$message.error(response.msg);
              if (this.captcha) {
                this.getimgdata();
              }
              this.loading = false;
            }
          })
          .catch(() => {
            this.loading = false;
          });
      },
      showPwd() {
        if (this.passwordType === "password") {
          this.passwordType = "";
        } else {
          this.passwordType = "password";
        }
      },
      handleLogin() {
        this.$refs.loginForm.validate(valid => {
          if (valid) {
            this.loading = true;
            this.getIndex();
          } else {
            console.log("error submit!!");
            return false;
          }
        });
      },
      //像localStorage里存入从页面获取的用户名和密码；
      setlocalStorage(c_name) {
        localStorage.setItem("siteName", JSON.stringify(c_name));
      },
      getlocalStorage() {
        this.ys_short_url_redirect_url = this.fun.getCookie(
          "ys_short_url_redirect_url"
        );
        // this.ys_short_url_redirect_tel = this.fun.getCookie('ys_short_url_redirect_tel');
        this.loginForm.mobile = JSON.parse(localStorage.getItem("siteName")); //保存到保存数据的地方
        // if (this.ys_short_url_redirect_tel) {
        //   this.loginForm.mobile = this.ys_short_url_redirect_tel;
        // }
      },
      //获取验证码
      sendSms() {
        let that = this;
        let rTime = that.t;

        if (!that.loginForm.mobile || !/^1\d{10}$/.test(that.loginForm.mobile)) {
          that.$refs.loginForm.validateField("mobile", err => {});
          return false;
        }

        if (this.fun.isTextEmpty(this.loginForm.captcha) && this.captcha) {
          this.$message({
            message: "请先填图形验证码",
            type: "error"
          });
          return;
        }

        $http
          .post("member.register.alySendCode", {
            mobile: this.loginForm.mobile,
            captcha: this.loginForm.captcha,
            sms_type: 1
          })
          .then(
            response => {
              if (response.result == 1) {
                this.$message.success(response.msg);
                // 倒计时
                let interval = window.setInterval(() => {
                  if (--that.t <= 0) {
                    that.t = rTime;
                    that.isDisabled = 1;
                    that.captcha_text = "获取验证码";

                    window.clearInterval(interval);
                  } else {
                    that.isDisabled = 0;
                    that.captcha_text = that.t + "s后重新获取";
                  }
                }, 1000);
              } else {
                this.loginForm.captcha = "";
                this.getimgdata();
                this.$message({
                  message: response.msg,
                  type: "error"
                });
              }
            },
            response => {
              console.log(response);
            }
          );
      },
      gotoRegister() {
        this.$router.push(this.fun.getUrl("register"));
      },
      setIcon(icon){
        var link = document.querySelector("link[rel*='icon']") || document.createElement('link');
        link.type = 'image/x-icon';
        link.rel = 'shortcut icon';
        link.href = icon;
        document.getElementsByTagName('head')[0].appendChild(link);
      },
      getLoginMode() {
        // var that = this;

        //没登录是没有返回basic_info信息的，会导致报错；任务编号: 41368
        http
          .get("member.login.new-login-mode","","",16).then(res => {
          if (res.result === 1) { 
            // PC端扫码登录
            if (this.isPc()) {
              this.wechat_qrcode_config = res.data.wechat_qrcode_config || {};
              this.yz_redirect = this.yz_redirect ? (this.yz_redirect.indexOf('http') > -1 ? base64_encode(this.yz_redirect) : this.yz_redirect) : '';
              this.select = '0'
              if (this.wechat_qrcode_config.is_open && (this.wechat_qrcode_config.wechat_login_type == 1 || this.wechat_qrcode_config.wechat_login_type == 2)) {
                // 开启PC端微信扫码登录  1
                // 开启PC端微信扫码关注微信号登录 2
                // this.login_type = 2;
                this.tabs[0].isShow = true;
                this.select = '1'
                this.login({
                  is_pc_qrcode: 1,
                  yz_redirect: '',
                });
              }else {
                this.tabs_is_show = true;
              }
              if(this.wechat_qrcode_config.is_wechat_login == 1 && this.wechat_qrcode_config.is_open == 1) {
                this.tabs[1].isShow = false;
              }
            }else {
              this.tabs_is_show = true;
            }
          } else {
            this.tabs_is_show = true;
            this.$message.error(res.msg);
          }
        });
      },
      login(data, refresh) {
        // let that = this;
        let url = "member.login.index";
        let type = "";
        let loading = "正在获取";
        let datainfo = data;
        if(this.wechat_qrcode_config.is_open && this.wechat_qrcode_config.wechat_login_type == 2 && this.select=='1') {
          type = "16";
          if(refresh == 1) {
            this.pc_token = "";
          }

          if(this.pc_token) {
            datainfo.pc_token = this.pc_token;
            loading = "";
          }

        }else {
          datainfo.yz_redirect = base64_encode(`${window.location.protocol}//${window.location.host}/addons/yun_shop/?menu#/subplatformt/subplatformtIndex?i=${this.fun.getKeyByI()}`);
          // datainfo.is_from = 'new';
        }
        datainfo.sub_platform = 1;
        http.pc_post(url, datainfo,'',type).then(res => {
          this.tabs_is_show = true;
          if (res.result === 1) {
            if (this.isPc() && res.data.status == 11) {
              // 扫码公众号登录首次
              this.pc_token = res.data.pc_token;
              this.account_url = res.data.account_url;
              if(refresh == 1 && this.timer2) {
                clearInterval(this.timer2);
                this.timer2 = null;
              }
              if(!this.timer2 && this.pc_bind_mobile != 1) {
                this.timer2 = setInterval(()=> {
                  this.login({
                    is_pc_qrcode: 1,
                    yz_redirect: this.yz_redirect
                  });
                }, 5000);
              }
            }else if (this.isPc() && res.data.status == 1) {
              // 扫码公众号登录成功
              this.pc_bind_mobile = res.data.pc_bind_mobile;
              if(this.timer2) {
                clearInterval(this.timer2);
                this.timer2 = null;
              }
              this.$message.success("欢迎登录");
              if (this.loginData.redirect_url) {
                window.location.href = this.loginData.redirect_url;
              } else {
                this.$router.push(
                  this.fun.getUrl("subplatformtIndex", {})
                );
              }
            }else {
              if(this.timer2) {
                clearInterval(this.timer2);
                this.timer2 = null;
              }
              this.$message.success("欢迎登录");
              if (this.loginData.redirect_url) {
                window.location.href = this.loginData.redirect_url;
              } else {
                this.$router.push(
                  this.fun.getUrl("subplatformtIndex", {})
                );
              }
            }

          } else {
            if (this.isPc() && res.data.status == 9) {
              let url = res.msg.url;

              if (url) {
                this.appid = this.getParam("appid", url);
                this.redirect_uri = this.getParam("redirect_uri", url);
                this.scope = this.getParam("scope", url);
                this.state = this.getParam("state", url);
              }
              this.login_obj = new WxLogin({
                // self_redirect:true,
                id: "login_code", 
                appid: this.appid,
                // scope: "snsapi_login",
                scope: this.scope,
                redirect_uri: encodeURIComponent(this.redirect_uri),
                // redirect_uri:encodeURI(that.redirect_uri),
                state: this.state,
                // style: "",
                // href: ""
              });
            } else {
              if(res.data.status != 10) {
                this.$message.error(res.msg);
              }
            }
          }
        });
      },
      isPc() {
        if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
          return false;
        }else {
          return true;
        }
      },
      changeSelect(item) {
        if(this.timer2) {
          clearInterval(this.timer2);
          this.timer2 = null;
        }
        this.select = item.id;
      },
      getParam(name, url) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
        // var r = window.location.search.substr(1).match(reg);
        if (url.indexOf("?") > -1) {
          var r = url.split("?")[1].match(reg);
          if (r != null) return unescape(r[2]);
          return null;
        }
        return null;
      },
    }
  };
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  /* 修复input 背景不协调 和光标变色 */

  /* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */

  $bg: #283443;
  $light_gray: #333;
  $cursor: #fff;

  @supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
    .login-container .el-input input {
      color: $cursor;

      &::first-line {
        color: $light_gray;
      }
    }
  }

  /* reset element-ui css */
  .login-container {
    .el-input {
      display: inline-block;
      height: 47px;
      width: 80%;

      input {
        border: 0;
        -webkit-appearance: none;
        border-radius: 0;
        padding: 12px 5px 12px 15px;
        color: $light_gray;
        height: 47px;
        background-color: #fff;
        caret-color: #666;

        // caret-color: $cursor;
        &:-webkit-autofill {
          -webkit-box-shadow: 0 0 0 1000px #fff inset !important;
          -webkit-text-fill-color: #333 !important;
        }
      }
    }

    .el-form-item {
      border-bottom: 1px solid #f5f5f5;
      background: #fff;
      color: #333;
    }
  }
</style>
<style>
/* body {
  height: 100%;
}
html {
  height: 100%;
}
#app {
  height: 100%;
}
#appMain {
  height: 100%;
} */
</style>
<style lang="scss" rel="stylesheet/scss" scoped>
  $bg: #fff;
  $dark_gray: #889aa4;
  $light_gray: #eee;

  .login-container {
    // height: 100%;
    height: 100vh;
    width: 100%;
    background-color: $bg;

    .forget {
      font-size: 14px;
      color: #29ba9c;
      cursor: pointer;
      position: absolute;
      right: 2rem;
    }

    .forget2 {
      font-size: 14px;
      color: #29ba9c;
      cursor: pointer;
      position: absolute;
      right: 7rem;
    }

    .register {
      padding-top: 15px;
      font-size: 14px;

      .forget3 {
        color: #29ba9c;
        cursor: pointer;
        position: absolute;
        // right: 7rem;
      }
    }

    .head {
      display: flex;
      padding-top: 60px;
      padding-bottom: 15px;
      border-bottom: 1px solid #e5e5e5;
      width: 1200px;
      margin: 0 auto;
    }

    .content_info {
      // margin-top: 50px;
      width: 1200px;
      margin: 50px auto 0 auto;
      display: flex;
      align-items: center;

      .login_img {
        padding: 0;
        overflow: hidden;
        position: relative;
        float: left;

        img {
          max-width: 100%;
          max-height: 365px;
          // width: auto;
          height: auto;
        }

        .logo {
          position: absolute;
          left: 50%;
          top: 30%;
          transform: translate(-50%, -50%);
          width: 500px;
          height: 150px;
        }

        .big {
          color: white;
          font-size: 34px;
          width: 100%;
          text-align: center;
          font-weight: bold;
          position: absolute;
          left: 50%;
          top: 65%;
          transform: translate(-50%, -50%);
        }
      }

      .login_input {
        box-shadow: 0 0 8px rgba(0, 0, 0, 0.08);
        background: #fff;

        input:focus {
          color: #333;
        }
      }
    }

    .login-form {
      position: relative;
      width: 520px;
      max-width: 100%;
      padding: 25px 35px 0;
      margin: 0 auto;
      overflow: hidden;
    }

    .tips {
      font-size: 14px;
      color: #fff;
      margin-bottom: 10px;

      span {
        &:first-of-type {
          margin-right: 16px;
        }
      }
    }

    .svg-container {
      padding: 6px 5px 6px 15px;
      color: $dark_gray;
      vertical-align: middle;
      width: 35px;
      display: inline-block;
    }

    .title-container {
      position: relative;

      .title {
        font-size: 26px;
        // color: $light_gray;
        color: #333;
        margin: 0 auto 40px auto;
        text-align: center;
        font-weight: bold;
      }

      .set-language {
        color: #fff;
        position: absolute;
        top: 3px;
        font-size: 18px;
        right: 0;
        cursor: pointer;
      }
    }

    .show-pwd {
      position: absolute;
      right: 0;
      top: 7px;
      font-size: 16px;
      color: $dark_gray;
      cursor: pointer;
      user-select: none;
    }

    .thirdparty-button {
      position: absolute;
      right: 0;
      bottom: 6px;
    }
  }

  .login-container-con {
    // width: 1200px;
    // margin: 0 auto;
    background: white;
  }

  .service {
    position: fixed;
    z-index: 10;
    right: 20px;
    bottom: 180px;
  }

  .code img {
    width: 200px;
    height: 200px;
  }

  .icon-all_service {
    cursor: pointer;
    font-size: 40px;
    color: #29ba9c;
  }

  .switch_on {
    font-size: 14px;
    margin-top: -15px;
    margin-bottom: 20px;
    color: #29ba9c;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }

  @media screen and (max-width: 1200px) {
    .login-container-con {
      width: 1000px;
      margin: 0 auto;
    }
  }

  ::v-deep .el-form-item__error {
    left: 60px;
  }

  ::v-deep .el-form-item__content {
    text-align: left;
  }

  ::v-deep .el-checkbox__input.is-checked + .el-checkbox__label {
    color: #29ba9c !important;
  }

  ::v-deep .el-checkbox__input.is-checked .el-checkbox__inner {
    background: #29ba9c !important;
    border-color: #29ba9c !important;
  }

  ::v-deep .el-checkbox__inner:hover {
    border-color: #29ba9c !important;
  }

  ::v-deep .el-checkbox__input.is-focus .el-checkbox__inner {
    border-color: #29ba9c !important;
  }

  .top-pane {
    display: flex;
    // margin-bottom: 20px;
    font-size: 22px;
    justify-content: space-around;
    cursor: pointer;
    padding-bottom: 20px;

    .active-sty {
      color: #f11111;
      border-bottom: 2px solid #f11111;
      padding-bottom: 10px;
    }
  }

  .code-pane {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .code-title {
      font-size: 20px;
      color: #666;
    }

    img {
      width: 200px;
      height: 200px;
    }

    .code-tip {
      font-size: 15px;
      color: #666;
      margin: 20px 0 40px 0;
      position: relative;

      .refresh {
        color: #f11111;
        position: absolute;
        right: -58px;
        top: 0;
        cursor: pointer;
      }
    }

    .refresh-op {
      color: #f11111;
      position: absolute;
      bottom: 40px;
      right: 82px;
      cursor: pointer;
    }
  }
</style>
